S3のCORS機能を使ってみた

LimChaejeong

2021.08.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、イムチェジョンです。
今回のブログではS3のCORS機能について調べ、実際に使ってみたいと思います。

アジェンダ

S3のCORS機能とは？
CORS機能のハンズオン
まとめ

1. S3のCORS機能とは？

Cross-Origin Resource Sharingの略。
一つのドメインでロードされ、他のドメインにあるリソースと相互作用するクライアントウェブアプリケーションに対する方法
CORS機能通じてAmazon S3でクライアント側WEBアプリケーションを構築し、Amazon S3リソースに対するCross-Originアクセスを選択的に許可。

2. CORS機能のハンズオン

htmlの作成

S3でクライアントウェブアプリケーションを構築する前に簡単にページを作成します。

index.html アドレスに接続すると表示されるメイン画面です。
<script>には二つ目のページ（index.htmlとsecond-page.html）が一緒に表示されるように作成したソースコードです。

<!DOCTYPE  html>
<html  lang="en">
<head>
    <title>Document</title>
</head>
    <body>
        <h1>CORS TEST page1</h1>
        <img  src="dog.jpg"  alt=""  width=800>
    </body>

    <div  id="tofetch">
    <script>
        var  tofetch = document.getElementById("tofetch");

        fetch('second-page.html')
        .then((response) => {
        return  response.text();
        })
        .then((html) => {
        tofetch.innerHTML = html
        });
    </script>
</html>

second-page.html 二つ目のページです。簡単に表示されるのを確認する予定です。

<p>This is second page for cors test.</p>

error.html エラーのページです。

<h1>I'm sorry. It's error</h1>

S3の利用し、静的WEBアプリケーションを構築

まず、二つのS3を作成し、クライアントウェブアプリケーションを構築します。

一つ目のバケットの設定です。
バケット名：cors-test-01-202108

クライアントウェブアプリケーションなので、パブリックアクセスをすべてブロックを解除します。

バケットを作成をした後、[プロパティ]の部分で静的ウェブサイトホスティングを編集します。

静的ウェブサイトホスティングを有効にするをチェックします。
インデックスドキュメントにindex.htmlとerror.htmlを入力します。

変更した内容を保存するとバケットウェブサイトエンドポイントができます。後にこのアドレスを通じてサイトに接続します。

[アクセス許可]部分でバケットポリシーを編集します。
今回はポリシージェネレータを利用します。
また、ARNの作成のため、バケットAPNの部分をコピーしておきます。

以下の設定で作成し、Add Statementをクリックします。
Select Type of Policy：S3 Bucket Policy
Effect：Allow
Principal：*
Actions：GetObject
Amazon Resource Name (ARN)：arn:aws:s3:::cors-test-02-202108/*

作成した内容を確認してGenerate Policyをクリックします。

すると自動にポリシーが作成されるので、この部分をコピーして保存します。

これでクライアントウェブアプリケーションが構築されました。
ファイルをアップロードして確認してみましょう。

さっき確認したバケットウェブサイトエンドポイントに接続するとindex.htmlが成功的に表示されました。下にエラーのページも表示されていますが、後に解決します。

二つ目のバケットの設定です。
バケット名：cors-test-01-202108

以下の設定は一つ目の設定と同じです。
ファイルだけ他のhtmlファイルをアップロードします。

バケットウェブサイトエンドポイントに接続してみるとsecond-page.htmlがよく作成されました。

CORSの設定

今回はCORSの設定をし、CORS機能を使用してみましょう。
上で作成した一つ目のサイトににエラーのページが出てます。
今回はここに二つ目のバケットにあるsecond-page.htmlを表示してみたいと思います。

まず、index.htmlを修正します。
second-page.html作成されている部分を二つ目バケットでsecond-page.htmlのファイルを表示するアクセスに修正し、もう一回アップロードします。
second-page.html　→　http://cors-test-02-202108.s3-website.ap-northeast-2.amazonaws.com/second-page.html

    <script>
        var  tofetch = document.getElementById("tofetch");

        fetch('http://cors-test-02-202108.s3-website.ap-northeast-2.amazonaws.com/second-page.html')
        .then((response) => {
        return  response.text();
        })
        .then((html) => {
        tofetch.innerHTML = html
        });
    </script>

その後、二つ目のバケットの[アクセス許可]部分の下にあるCross-Origin Resource Sharing (CORS)を以下の内容を追加します。

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://cors-test-01-202108.s3-website.ap-northeast-2.amazonaws.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

その後、一つ目のバケットウェブサイトエンドポイントに接続してみると、違うバケットに入っているindex.htmlとseconed-page.htmlが一緒に表示されています。